草庐IT

D3 笔记

全部标签

javascript - svg + Sprite 表 + d3 + clipPath + 位置 + 大小

需要提前道歉:对于篇幅和我的无知。我正在尝试自学新概念:d3.js和Sprite表。Sprite表的概念很容易理解,但我很困惑如何将其集成到d3中。基本上我想做的是从Sprite表中选择我想用作图像的Sprite,然后使用d3在页面的其他地方显示这个选定的Sprite,并且很可能是同一个Sprite的多个副本。供引用的实际sprite表(见下面的免责声明):问题如下:1)我将sprite表添加到我的html中,硬编码现在,这显示了我想要的特定Sprite,但是,Sprite的尺寸/定位就像显示了整个Sprite表一样。我怎样才能只“捕获”Sprite本身,而不仅仅是隐藏未使用的Spri

javascript - 带图例的 D3 等值线图

我有一张显示美国总人口的等值线图。我想在map上添加一个显示分位数范围值的图例。我已经看到关于这个主题的其他类似问题,但似乎无法让它适用于我的具体案例。我知道我需要包括颜色范围或颜色域,但不确定这是否是正确的方法。截至目前,图例中只显示一个特征,是否所有图例特征都堆叠在一起。我怎么才能确定以及如何解决这个问题。//DefinedefaultcolorbrewerschemevarcolorSchemeSelect="Greens";varcolorScheme=colorbrewer[colorSchemeSelect];//definedefaultnumberofquantiles

javascript - 使用 Sinon 在 D3 中测试鼠标悬停事件

我在尝试通过测试时遇到了问题。我希望能够使用spy来检查鼠标悬停事件是否被正确调用。目前我收到以下错误,“错误:预计至少被调用一次但从未被调用”。我的部分困惑与d3和jQuery选择器之间的差异有关,我非常乐意使用后者,但我不确定如何在测试中正确使用前者以获得我想要的结果。我的依赖项是d3、jQuery、mocha、chai、sinon和sinon-chai。我的index.html文件中的相关代码,mocha.ui('bdd');mocha.reporter('html');varexpect=chai.expect;mocha.run();fixtures.js,varpath=s

javascript - 在 D3 v4 中使用 zoom.translateExtent 限制 map 平移

我正在尝试显示单个州的map,缩放和平移限制在州的边界内。它主要工作,除了状态路径缩放以适应较小容器时的平移约束。我认为这归结为我不理解用于zoom.translateExtent的参数(尽管我对此很陌生,所以它可能是其他东西)。Liveexampleonbl.ocks.org,withlinkstopriorart.值得注意的是,我为d3.geoPath使用了空投影,因为我使用ogr2ogr为每个州生成了投影坐标中的shapefile。这就是我使用缩放变换使map适合其容器的原因。 最佳答案 @McGiogen的解决方案几乎是正确

javascript - D3.js 4 与 AngularJS 1.5(组件或指令?)

我想在AngularJS1.5x中使用D3.jsv4过去我使用.directives作为图表,但现在我想知道是否可以使用.components代替指令,这是否是一个好的做法。CheckthesamplecaseonPlunkr问题出现在组件中的d3.select(element[0]).append('svg')中。控制台抛出错误:元素未定义。所以我尝试了类似d3.select('chart-container').append('svg')但随后d3在拥有该类的第一个元素中注入(inject)所有图表(在所有文档中查找该类,而不仅仅是组件)。那么...有人可以帮我为可重用组件做一个正

javascript - D3 圆包布局中嵌套圆的工具提示

我在这里敲我的头。我想在ZoomablePackLayout等结构中显示叶节点的工具提示.叶节点是棕色的。如果我使用工具提示的标准代码:vis.selectAll("circle").data(nodes).enter().append("svg:circle").attr("class",function(d){returnd.children?"parent":"child";}).attr("cx",function(d){returnd.x;}).attr("cy",function(d){returnd.y;}).attr("r",function(d){returnd.r;

javascript - 在 d3 时间轴上显示每隔一个刻度标签?

我有一个x轴使用自定义时间格式的d3图表:varx=d3.time.scale.utc().domain([start,end]).range([0,width]);varcustomTimeFormat=d3.time.format.utc.multi([["%b%d",function(d){returnd.getUTCDate()!=1;}],["%b",function(d){returnd.getUTCMonth();}],["%Y",function(){returntrue;}]]);varxAxisTop=d3.svg.axis().scale(x).orient("t

javascript - D3 围绕一组圆圈绘制船体

我想围绕使用d3构建的分组力导向图绘制一个外壳。我已经用圆圈构建了图表。但我现在想用路径(船体)加入圆圈的交点。如果不连接交叉点,围绕圆圈组绘制一个外壳就足够了。我尝试了Force-DirectedLayoutwithConvexHull例子。但是我有覆盖文本的文本和圆圈以及连接文本的链接。varvertices=newArray();varwidth=960,height=500;varcolor=d3.scale.category10();varr=6;varforce=d3.layout.force().size([width,height]);varsvg=d3.select(

javascript - d3 - 数据更新时更改文本标签

我使用d3创建了一个条形图,显示其上每个条形的文本值。我通过按钮上的单击事件在两个不同的数据集之间切换。数据集在mousedown上成功更改,即条形图按应有的大小改变,但我无法更改条形上的文本标签。我的redrawText函数没有做任何事情,再次调用我的drawText函数只是在前一个标签的顶部重绘数据(正如人们所期望的那样)。我正在寻找一种方法来删除旧标签并重新绘制反射(reflect)我的removeText函数中的新数据的标签。这是我的drawText函数,最初调用它是为了创建标签。'datachoose'是选择用于绘制正确数据集的变量的名称。functiondrawText(d

javascript - 如何在 d3.scale.ordinal() 中指定域?

varW=100;varH=200;vardata=[{v:4},{v:8},{v:15},{v:16},{v:23},{v:42}];varx=d3.scale.linear().domain([0,max_x]).range([0,W]);vary=d3.scale.ordinal().domain([0,1,2,3,4,5]).rangeBands([0,H]);如何在不输入数据的情况下自动枚举数据域,例如0、1、2、3我尝试了domain(data)和domain([0,data.length]),但我需要两者之间的所有值。 最佳答案